<template>
  <el-main>
    <el-col class="search-form">
      <el-form :inline="true" :model="formInline" size="mini">
        <el-form-item label="审批排号:">
          <el-input class="ipt-width-150" v-model="formInline.reimid" placeholder="输入申请人"></el-input>
        </el-form-item>
        <el-form-item label="日期:">
          <el-input class="ipt-width-150" v-model="formInline.date" placeholder="输入日期"></el-input>
        </el-form-item>
        <el-form-item label="申请人:">
          <el-input class="ipt-width-150" v-model="formInline.username" placeholder="输入申请人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-col class="biaoDa">
      <el-button type="primary" @click="dialogFormVisible = true" class="text-rigth">添加</el-button>
      <el-table
        :data="textData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        class="table"
        border
        style="width: 100%"
      >
        <el-table-column prop="reimid" label="审批牌号" width="100"></el-table-column>
        <el-table-column prop="date" label="日期" width="120"></el-table-column>
        <el-table-column prop="username" label="申请人" width="100"></el-table-column>
        <el-table-column prop="feedetails" label="报销明细" width="250"></el-table-column>
        <el-table-column prop="reimamount" label="报销金额" width="100"></el-table-column>
        <el-table-column prop="date" label="创建时间" width="150"></el-table-column>
        <!-- <el-table-column prop="reimid" label="审批状态" width="120"></el-table-column> -->
        <el-table-column prop="state" label="审批结果" width="100"></el-table-column>
        <el-table-column prop="username" label="创建人" width="150"></el-table-column>
        <el-table-column prop="addtime" label="创建时间" width="150"></el-table-column>
        <el-table-column prop="img" label="图片" width="187"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="handleshanc(scope.row)" type="text" size="small">更改</el-button>
            <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <!-- 下表页头 -->
    <el-col class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[9, 15, 20, ]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-col>

    <!-- 添加信息模态框 -->
    <el-dialog title="添加费用报销单" :visible.sync="dialogFormVisible" class="metaik">
      <el-form ref="form" :model="forminfo" class="me-text">
        <el-form-item label="报销金额" class="me-nai1">
          <el-input v-model="forminfo.reimamount" class="me-input"></el-input>
        </el-form-item>
        <el-form-item label="服务状态:">
          <el-select class="ipt-width-150" v-model="forminfo.reimtypeid" placeholder="选择服务">
            <el-option label="业务招待费" value="0"></el-option>
            <el-option label="差旅费" value="1"></el-option>
            <el-option label="会议费" value="2"></el-option>
            <el-option label="办公水电费" value="3"></el-option>
            <el-option label="医疗费" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报销明细" class="me-nai1">
          <el-input v-model="forminfo.feedetails" class="me-input"></el-input>
        </el-form-item>
        <el-form-item label="申请人" class="me-nai1">
          <el-input v-model="forminfo.username" ref="cls" class="me-input"></el-input>
        </el-form-item>
        <el-form-item label="日期" class="me-nai1">
          <!-- <el-input v-model="forminfo.addtime" class="me-input"></el-input> -->
          <el-date-picker
            v-model="forminfo.addtime"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看模态框 -->
    <el-dialog class="fade" :visible.sync="dialogTableVisible">
      <div class="check">
        <el-table :data="text">
          <!-- <el-table-column  prop="checkid" label="编号" width="120"></el-table-column> -->
          <el-table-column label="日期" prop="date" width="150"></el-table-column>
          <el-table-column label="申请人" prop="username" width="100"></el-table-column>
          <el-table-column label="报销明细" prop="feedetails" width="150"></el-table-column>
          <el-table-column label="报销金额" prop="reimamount" width="200"></el-table-column>
          <el-table-column label="创建时间" prop="date" width="180"></el-table-column>
          <el-table-column label="审批结果" prop="state" width="120"></el-table-column>
          <el-table-column label="创建人" prop="username" width="120"></el-table-column>
          <el-table-column label prop="addtime" width="120"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </el-main>
</template>

<script>
import Axios from "axios";
export default {
  name: "reimbursement",
  data() {
    return {
      // 数据
      textData: [],
      // 查看
      text: [],
      // 搜索框
      formInline: {
        reimid: "",
        date: "",
        username: "",
      },
      bbt: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      // form: {},
      formLabelWidth: "120px",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      // <!-- 添加信息模态框 -->
      forminfo: {
        addtime: "",
        currentnode: 0,
        date: "",
        empid: 0,
        feedetails: "",
        flowno: 0,
        img: "",
        reimamount: "",
        reimid: 0,
        reimtypeid: "",
        state: 0,
        username: "",
      },
      // 翻页
      currentPage4: 1, //当前页
      pageSize: 9, //每页显示
      currentPage: 1,
      total: "",
    };
  },

  methods: {
    // 数据渲染
    loock() {
      let that = this;
      let urla = "/api/selectEmpReim";
      let data = { empid: 2};
      this.$axios({
        method: "post",
        url: urla,
        data: JSON.stringify(data),
      }).then((res) => {
        console.log(res.data)
        for (let i = 0; i < res.data.data.length; i++) {
          let obj = res.data.data[i];
          if (obj.state == 0) {
            obj.state = "审批成功";
          } else if (obj.state == 1) {
            obj.state = "审批中";
          }
          this.textData = res.data.data;
          this.total = this.textData.length;
        }
        console.log(res);
      });
    },
    cleaformInner() {
      this.forminfo.reimamount = "";
      this.forminfo.feedetails = "";
      this.forminfo.universali = "";
      this.forminfo.username = "";
      this.forminfo.flownodei = "";
      this.forminfo.remark = "";
      this.forminfo.addtime = "";
      this.forminfo.reimtypeid = "";
    },
    soReset() {
      this.formInline.reimid = "";
      this.formInline.date = "";
      this.formInline.username = "";
    },
    // 模态框添加
    confirm() {
      this.dialogFormVisible = false;
      console.log(this.forminfo);
      let arr = {
        universalid: "",
        flownodeid: "",
        username: "",
        empid: 2,
        addtime: "",
        currentnode: 0,
        date: "",
        feedetails: "",
        flowno: 0,
        img: "",
        reimamount: "",
        reimid: 0,
        reimtypeid: "",
        state: 0,
      };
      console.log(arr);
      arr.reimamount = this.forminfo.reimamount; //金额
      arr.feedetails = this.forminfo.feedetails; //报销明细
      arr.universalid = this.forminfo.universalid;
      arr.username = this.forminfo.username; //申请人
      arr.flownodeid = this.forminfo.flownodeid;
      arr.remark = this.forminfo.remark;
      arr.date = this.forminfo.addtime; //日期
      arr.reimtypeid = this.forminfo.reimtypeid; //报销明细
      console.log(arr.date);
      let that = this;
      let urla = "/api/addReim";
      this.$axios({
        method: "post",
        url: urla,
        data: JSON.stringify(arr),
      }).then((res) => {
        let urla = "/api/selectEmpReim";
        let data = { empid: 2 };
        this.$axios({
          method: "post",
          url: urla,
          data: JSON.stringify(data),
        }).then((res) => {
          that.textData = res.data.data;
          console.log(res);
          that.cleaformInner();
          this.$router.go(0);
        });
      });
    },
    // 删除
    remove(row) {
      console.log(row);
      let that = this;
      console.log(this.textData);
      for (let i = 0; i < that.textData.length; i++) {
        if (that.textData[i].reimid === row.reimid) {
          // return true;
          console.log(1);
          that.textData.splice(i, 1);
        }
      }
      console.log(row);
    },
    // 模态框查看
    handleClick(row) {
      this.dialogTableVisible = true;
      // this.text = row
      console.log(row);
      let obj = {
        date: row.date, //日期
        username: row.username, //申请人
        feedetails: row.feedetails, //报销明细
        reimamount: row.reimamount, //报销金额
        date: row.date, //创建时间
        state: row.state, //审批结果
        username: row.username,
        addtime: row.addtime,
      };
      this.text.push(obj);
      // console.log(this.text);
    },
    // 搜索框搜索按
    onSubmit() {
      let formInline = this.formInline;
      console.log(formInline);
      let textData = this.textData;
      let zhuan = [];
      for (let i = 0; i < textData.length; i++) {
        let obj = textData[i];
        if (obj.reimid == formInline.reimid) {
          zhuan = obj;
        } else if (obj.date == formInline.date) {
          zhuan = obj;
        } else if (obj.username == formInline.username) {
          zhuan = obj;
        } else {
        }
      }
      // for(let i = 0; i < zhuan.length; i++){
      //   let obj = zhuan[i]
      //   if(obj == zhuan){
      //     console.log(obj)
      //   }
      // }
      console.log(zhuan);
      this.bbt.push(zhuan);
      
      this.textData = this.bbt;
    
    },
    //搜索重置
    reset() {
      this.soReset();
      this.$router.go(0);
    },
    // 翻页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
    },
  },
  created() {
    this.loock();
  },
};
</script>


<style  scoped lang="less" >
.search-form {
  height: 60px;
  padding-top: 15px;
  margin-bottom: 20px;
  padding-left: 20px;
  box-shadow: 0 0 3px 1px #e4e4e4;
  font-size: 25px;
}
.text-rigth {
  margin-top: 10px;
  margin-bottom: 15px;
}
.biaoDa {
  margin-bottom: 10px;
  padding-left: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  box-shadow: 0 0px 3px 1px #e4e4e4;
}
.block {
  height: 50px;
  text-align: center;
  padding-top: 15px;
  box-shadow: 0 0px 3px 1px #e4e4e4;
}
.me-text {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.me-nai1 {
  width: 100%;

  // flex-direction: row;
  // flex-wrap: wrap;

  // margin-bottom: 5px;
}
.me-tu {
  width: 100%;
  display: flex;
  flex-direction: row;
}
</style>